<template>
  <div>
    <div class="banner-container">
      <swiper
        class="banner"
        :options="swiperListOption"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="item in swiperList">
          <img style="width: 100%;cursor: pointer;height: 440px;" :data-id="item.id" :src="item.adImagePath" alt="">
          <!--<img style="width: 100%;" :data-id="item.id"  src="http://localhost/static/images/dx-swiper.jpg" alt="">-->
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination1"></div>
    </div>
    <div class="login-box-container">
      <div class="login-container" v-if="!$store.state.user.token">
        <Login :title="'欢迎登录'"/>
      </div>
      <div class="account-container" v-else>
        <UserInfo/>
      </div>
    </div>
    <!--  流程进度条-->
    <div class="select-course-filter" v-for="item in adsList" @click="toSwiper(item)">
      <img :src="item.adImagePath" alt="">
    </div>

    <div class="recommend-course-container">
      <div>
        <div class="recommend-course">
          <header>
            <h1><img src="~@assets/images/recommend-course-Icon.png" alt="">推荐课程</h1>
            <!--<img src="~@assets/images/more.png" alt="">-->
          </header>

          <section>
            <ul>
              <li v-for="item  in recommendCourseList" :key="item.id">
                <div class="course-img" @click="toClass(item.id)">
                  <img src="~@assets/images/course_login.png" v-real-img="item.picPath" alt="">
                </div>
                <!--<div class="credit"> 2.5学时</div>-->
                <div class="bottom">
                  <div class="title ellipsis-one" :title="$utils.unEscapeHTML(item.name)" @click="toClass(item.id)">
                    {{$utils.unEscapeHTML(item.name)}}
                  </div>
                  <div>
                    <img src="~@assets/images/userIcon.png" alt="">
                    <span>{{item.teacherName}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </section>
        </div>
        <div class="announcements">
          <header>
            <h1>通知公告</h1>
            <img src="~@assets/images/more.png" alt="" @click="$router.push('/notice')">
          </header>
          <section>
            <ul>
              <li v-for="item in noticeList" :key="item.id" @click="toDetail(item.id,'notice')" class="item ellipsis-one" :title="item.title">
                <img src="~@assets/images/notice-Icon.png" alt="">
                {{item.title}}
              </li>
            </ul>
          </section>
        </div>
      </div>

    </div>

    <div class="popular-major-container">
      <div class="popular-major">
        <header>
          <h1><img src="~@assets/images/popular-major-Icon.png" alt="">热门专业</h1>
          <!--<img src="~@assets/images/more.png" alt="">-->
        </header>
        <swiper
          class="popular-major-list"
          :options="swiperOption"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <swiper-slide class="item" v-for="item in specialList" :key="item.id">
            <img src="~@assets/images/course_login.png" v-real-img="item.pic"
                 @click="showTcourse(item.id)" alt="">
            <p>{{item.name}}</p>
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <div class="teacher-recommended-container">
      <div class="teacher-recommended">
        <header>
          <h1><img src="~@assets/images/teacher-recommended-Icon.png" alt="">名师推荐</h1>
        </header>
        <section>
          <swiper
            class="teacher-list "
            :options="swiperTeacherOption"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
          >
            <swiper-slide class="teacher-item" v-for="item in teacherList" :key="item.teacherId">
              <div class="teacher-box">
                <img :src="item.picPath"  alt="">
                <span>{{item.teacherName}}</span>
              </div>
              <div class="bottom">
                <div>{{item.teacherInfo}}</div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="swiper-button-prev left button" slot="button-prev">
            <img src="~@assets/images/right-btn.png" alt="">
          </div>
          <div class="swiper-button-next right button" slot="button-next">
            <img src="~@assets/images/right-btn.png" alt="">
          </div>
        </section>

      </div>
    </div>
    <div class="commone-asked-container" style="display: none;">
      <div class="commone-asked">
        <!--  <header>
			<h1>常见问题</h1>
		  </header>
		  <section>
			<ul>
			  <li>
				<div class="border">
				  <img src="~@assets/images/learning-style-Icon.png" alt="">
				</div>
				<div>
				  <div class="title">学习方式</div>
				  <div>手机专用APP、推荐浏览器</div>
				</div>
			  </li>
			  <li>
				<div class="border">
				  <img src="~@assets/images/account-problem-Icon.png" alt="">
				</div>
				<div>
				  <div class="title">账号问题</div>
				  <div>账号、密码</div>
				</div>
			  </li>
			  <li>
				<div class="border">
				  <img src="~@assets/images/learning-course-Icon.png" alt="">
				</div>
				<div>
				  <div class="title">课程学习</div>
				  <div>公需课、专业课</div>
				</div>
			  </li>
			  <li>
				<div class="border">
				  <img src="~@assets/images/show-home-page-Icon.png" alt="">
				</div>
				<div>
				  <div class="title">主页显示</div>
				  <div>页面显示不完整、操作无反应</div>
				</div>
			  </li>
			  <li>
				<div class="border">
				  <img src="~@assets/images/learning-process-Icon.png" alt="">
				</div>
				<div>
				  <div class="title">学习进度</div>
				  <div>培训课程进度、已学完课程</div>
				</div>
			  </li>
			  <li>
				<div class="border">
				  <img src="~@assets/images/phone-Icon.png" alt="">
				</div>
				<div class='kefu-tele'>
				  <div class="title">联系电话</div>
				  <div>客服热线：400-8520-797</div>

				</div>
			  </li>
			</ul>
		  </section>-->
        <div class="q-block">
          <h3 class="ad-title">常见问题</h3>
          <div class="q-item" v-for="item in commonList" :key="item.id" @click="toCommonQuestion(item.id)">
            <span>{{item.question}}？</span>
            <i class="el-icon-caret-right"></i>
          </div>
          <button class="button-view-more" style="margin-top: 34px;">查看更多</button>
        </div>
        <div class="q-block">
          <h3 class="ad-title">需要帮助？</h3>
          <div class="help-block">
            <div class="help-block-box">
              <div class="help-item" v-if="$store.state.app.footer.customerPhones">
                <div class="help-phone">
                  <img src="~@assets/images/v1_help_phone.png" alt="" style="width: 70px;">
                  <div class="desc1" v-for="(item,index) in $store.state.app.footer.customerPhones" :key="index">{{item}}</div>
                </div>
                <!--<div class="desc2" v-if="$store.state.app.footer.customerPhones">{{$store.state.app.footer.customerPhones[0]}}</div>-->
              </div>
              <div class="help-item" v-if="$store.state.app.footer.customerErCodePath">
                <img :src="$store.state.app.footer.customerErCodePath" alt="">
                <div class="desc1">联系在线客服</div>
              </div>
              <div class="help-item" v-if="$store.state.app.footer.chats && $store.state.app.footer.chats[0]">
                <img :src="$store.state.app.footer.chats[0].groupErCode" alt="">
                <div class="desc1">{{$store.state.app.footer.chats[0].groupType}}群</div>
              </div>
            </div>
            <!--<div class="help-tip">（客服在线时间 9:00 ~21:00）</div>-->
          </div>
        </div>
      </div>
    </div>

    <!--飘窗-->
    <div id="Div2" style="position:relative;z-index: 99999;" v-show="pcImgList.length !== 0 && pcImgFlag">
      <img style="cursor:pointer;"  @click="openUrl(pcImgList[0].adOpenWay,pcImgList[0].adUrl)"
           :src="pcImgList[0] &&pcImgList[0].adImagePath" alt="">
      <i style="position:absolute;right: 10px;top: 10px;cursor:pointer;font-size: 18px;"
         class="el-icon-circle-close el-icon"  @click="pcImgFlag = false"></i>
    </div>
  </div>
</template>

<script>
  import index from "./indexjs";

  export default {
    ...index
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";
</style>
